<template>
	<z-paging ref="paging" @query="queryList" :refresherEnabled="false" :loadingMoreEnabled="false"
		:auto="false" :hideEmptyView="true">
		<view slot="top">
			<z-nav-bar backState="1000">积分兑换</z-nav-bar>
		</view>
		
		<view class="bg-white u-p-30" @click="handleSelectAddress">
			<template v-if="defaultAddress == null" >
				<view class="u-flex" style="line-height: 80rpx;">
					<view class="u-flex-1">
						<u-icon name="map-fill" size="20" color="#FFB143"></u-icon>
					</view>
					<view class="u-flex-9">
						<view class="u-font-32 text-bold">请新建收货地址</view>
					</view>
					<view class="u-flex-1 u-flex u-flex-end">
						<view style="opacity: 0.5;">
							<u-icon name="arrow-right" size="20"></u-icon>
						</view>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="u-flex" >
					<view class="u-flex-1">
						<u-icon name="map-fill" size="20" color="#FFB143"></u-icon>
					</view>
					<view class="u-flex-9" >
						<view class="u-line-3">
							<text>{{orderHeader.province}}</text>
							<text class="u-p-l-10">{{orderHeader.city}}</text>
							<text class="u-p-l-10">{{orderHeader.area}}</text>
							<text class="u-p-l-10">{{orderHeader.address}}</text>
						</view>
						<view class="u-p-t-10" style="opacity: 0.5;">
							<text>{{orderHeader.contacts}}</text>
							<text class="u-p-l-30">{{orderHeader.contactNumber}}</text>
						</view>
					</view>
					<view class="u-flex-1 u-flex u-flex-end">
						<view style="opacity: 0.5;">
							<u-icon name="arrow-right" size="20"></u-icon>
						</view>
					</view>
				</view>
			</template>
		</view>
		
		<view class="u-m-t-30 u-p-30 bg-white">
			<view>
				<text class="u-font-34 text-bold">已选择商品</text>
			</view>
			<view class="u-flex u-m-t-30" v-for="(spu, index) in orderHeader.details" :key="index">
				<view class="u-flex-4">
					<!-- <image src="../../static/images/home/sku-4.png" style="width: 200rpx; height: 200rpx;border-radius: 30rpx;"></image> -->
					<image :src="spu.bannerImageList[0]" style="width: 200rpx; height: 200rpx;border-radius: 30rpx;"></image>
				</view>
				<view class="u-flex-8">
					<view>{{spu.spuTitle}}</view>
					<view class="u-m-t-10">
						<text class="u-font-32 ">{{spu.point}}</text>
						<text class="u-m-l-10">积分</text>
					</view>
					<view class="u-m-t-10">
						<text class="u-m-r-10">数量</text>
						<text>×</text>
						<text>{{spu.count}}</text>
					</view>	
					<!-- <view class="u-flex u-flex-end">
						<u-number-box v-model="number"></u-number-box>
					</view> -->
				</view>
			</view>
		</view>
		
		<view slot="bottom">
			<view class="u-p-30 u-flex bg-white">
				<view class="u-flex-7 u-flex">
					<view>
						<text>共</text>
						<text>{{orderHeader.details.length}}</text>
						<text>件</text>
					</view>
					<view class="u-m-l-20">
						合计:
					</view>
					<view class=" u-m-l-20">
						<text class="u-font-40">{{orderHeader.totalPoint}}</text>
						<text class="u-m-l-10">积分</text>
					</view>
				</view>
				<view class="u-flex-5 u-flex u-flex-end">
					<u-button text="确认兑换" shape="circle" :customStyle="{'backgroundColor':'#FFB143', 'color': '#FFFFFF'}" @click="handleSubmit"></u-button>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script>
	import {jumpTypeEnum} from '@/common/const.js'
	import {defaultAddress} from '@/api/address.js'
	import {create} from '@/api/point.js'
	
	export default{
		data(){
			return{
				defaultAddress: {},
				orderHeader:{},
				number:1,
			}
		},
		watch:{
			defaultAddress(e){
				this.orderHeader.province = e.province
				this.orderHeader.city = e.city
				this.orderHeader.area = e.area
				this.orderHeader.address = e.address
				this.orderHeader.contacts = e.contacts
				this.orderHeader.contactNumber = e.contactNumber			
			},
		},
		onLoad(e) {
			this.orderHeader = JSON.parse(decodeURIComponent(e.orderHeader))
			console.log(this.orderHeader)
			this.init()
		},
		methods:{
			
			/**
			 * 初始化
			 */
			init(){
				this.reload()
			},
			
			/**
			 * 重新加载
			 */
			reload(){
				setTimeout(()=>{
					// 重新加载
					this.$refs.paging.reload()
				},100)
			},
			
			/**
			 * 选择收货地址
			 */
			handleSelectAddress(){
				this.jumpUtil.jumpTo(jumpTypeEnum.navigate, `/pages_one/address/index?route=order`, true)
			},
			
			queryList(){
				// 获取默认地址
				defaultAddress().then(res=>{
					this.defaultAddress = res.data
				})
				
				this.$refs.paging.complete([]);
			},
			
			/**
			 * 创建积分商城订单
			 */
			handleSubmit(){
				let msg = this.checkData()
				if(msg != ''){
					this.$u.toast(msg)
					return
				}
				
				create(this.orderHeader).then(res=>{
					let orderInfo = res.data
					this.jumpUtil.jumpTo(jumpTypeEnum.redirect, `/pages_one/points_mall/finish?orderId=${orderInfo.id}`, false)
				})
			},
			
			/**
			 * 检查数据
			 */
			checkData(){
				// 判断是否有默认地址
				if(this.defaultAddress == null){
					return '请选择收货地址'
				}				
				return ''
			},
		}
	}
</script>

<style>
</style>